<!doctype html>
<html ng-app>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" type="text/css" href="Scope1.css" />
	</head>
	<body>
		<div ng-controller="EventController">
			Root scope
			<tt>MyEvent</tt> count: {{count}}
			<ul>
				<li ng-repeat="i in [1]" ng-controller="EventController">
					<button ng-click="$emit('MyEvent')">
						$emit('MyEvent')
					</button>
					<button ng-click="$broadcast('MyEvent')">
						$broadcast('MyEvent')
					</button>
					<br>
					Middle scope
					<tt>MyEvent</tt> count: {{count}}
					<ul>
						<li ng-repeat="item in [1, 2]" ng-controller="EventController">
							Leaf scope
							<tt>MyEvent</tt> count: {{count}}
						</li>
					</ul>
				</li>
			</ul>
		</div>

	</body>
	<script src="js/angular-1.3.0.js"></script>
	<script src="Scope2.js"></script>
</html>